<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统设置 - NetFlow 网络流量管理系统</title>
    <!-- <link rel="stylesheet" href="css/style.css"> -->
    <link rel="stylesheet" href="/luci-static/resources/netflow/css/style.css">
    <!-- <script src="/luci-static/resources/netflow/js/overview.js"></script> -->
</head>
<body>
    <header>
        <div class="container">
            <h1>NetFlow 网络流量管理系统</h1>
            <nav>
                <ul>
                    <!-- <li><a href="index.html">系统概览</a></li>
                    <li><a href="statistics.html">统计信息</a></li>
                    <li><a href="settings.html" class="active">系统设置</a></li>
                    <li><a href="docs.html">文档</a></li> -->

                    <li><a href="overview">系统概览</a></li>
                    <li><a href="statistics">统计信息</a></li>
                    <li><a href="settings" class="active">系统设置</a></li>
                    <li><a href="docs">文档</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="container">
        <section class="card">
            <h2>基本设置</h2>
            <form class="settings-form">
                <div class="form-group">
                    <label for="system_enabled">启用系统</label>
                    <input type="checkbox" id="system_enabled" checked>
                </div>
                
                <div class="form-group">
                    <label for="network_interface">网络接口</label>
                    <select id="network_interface">
                        <option value="eth0">eth0 (WAN)</option>
                        <option value="eth1">eth1 (LAN)</option>
                        <option value="br-lan">br-lan (桥接)</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="total_bandwidth">总带宽 (kbps)</label>
                    <input type="number" id="total_bandwidth" value="100000">
                </div>
                
                <div class="form-group">
                    <label for="log_level">日志级别</label>
                    <select id="log_level">
                        <option value="debug">调试</option>
                        <option value="info" selected>信息</option>
                        <option value="warning">警告</option>
                        <option value="error">错误</option>
                    </select>
                </div>
                
                <button type="button" class="btn btn-primary">保存设置</button>
            </form>
        </section>
        
        <section class="card">
            <h2>优先级设置</h2>
            <div class="tabs">
                <div class="tab-header">
                    <div class="tab-item active" data-tab="app-priority">应用程序优先级</div>
                    <div class="tab-item" data-tab="user-priority">用户优先级</div>
                    <div class="tab-item" data-tab="time-priority">时间优先级</div>
                </div>
                
                <div class="tab-content">
                    <div class="tab-pane active" id="app-priority">
                        <table>
                            <thead>
                                <tr>
                                    <th>应用类型</th>
                                    <th>优先级</th>
                                    <th>最小带宽 (%)</th>
                                    <th>最大带宽 (%)</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>视频会议</td>
                                    <td>1 (最高)</td>
                                    <td>20</td>
                                    <td>100</td>
                                    <td><button class="btn btn-small">编辑</button></td>
                                </tr>
                                <tr>
                                    <td>语音通话</td>
                                    <td>1 (最高)</td>
                                    <td>15</td>
                                    <td>90</td>
                                    <td><button class="btn btn-small">编辑</button></td>
                                </tr>
                                <tr>
                                    <td>在线游戏</td>
                                    <td>2 (高)</td>
                                    <td>10</td>
                                    <td>80</td>
                                    <td><button class="btn btn-small">编辑</button></td>
                                </tr>
                                <tr>
                                    <td>视频流媒体</td>
                                    <td>2 (高)</td>
                                    <td>15</td>
                                    <td>70</td>
                                    <td><button class="btn btn-small">编辑</button></td>
                                </tr>
                                <tr>
                                    <td>网页浏览</td>
                                    <td>3 (中)</td>
                                    <td>10</td>
                                    <td>60</td>
                                    <td><button class="btn btn-small">编辑</button></td>
                                </tr>
                                <tr>
                                    <td>文件下载</td>
                                    <td>4 (低)</td>
                                    <td>5</td>
                                    <td>40</td>
                                    <td><button class="btn btn-small">编辑</button></td>
                                </tr>
                            </tbody>
                        </table>
                        <button class="btn btn-secondary">添加应用</button>
                    </div>
                    
                    <div class="tab-pane" id="user-priority">
                        <table>
                            <thead>
                                <tr>
                                    <th>设备标识</th>
                                    <th>类型</th>
                                    <th>优先级</th>
                                    <th>最小带宽 (%)</th>
                                    <th>最大带宽 (%)</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>192.168.1.100</td>
                                    <td>IP地址</td>
                                    <td>1 (最高)</td>
                                    <td>20</td>
                                    <td>100</td>
                                    <td><button class="btn btn-small">编辑</button></td>
                                </tr>
                                <tr>
                                    <td>AA:BB:CC:DD:EE:01</td>
                                    <td>MAC地址</td>
                                    <td>2 (高)</td>
                                    <td>15</td>
                                    <td>80</td>
                                    <td><button class="btn btn-small">编辑</button></td>
                                </tr>
                                <tr>
                                    <td>192.168.1.0/24</td>
                                    <td>IP网段</td>
                                    <td>3 (中)</td>
                                    <td>10</td>
                                    <td>60</td>
                                    <td><button class="btn btn-small">编辑</button></td>
                                </tr>
                            </tbody>
                        </table>
                        <button class="btn btn-secondary">添加设备</button>
                    </div>
                    
                    <div class="tab-pane" id="time-priority">
                        <table>
                            <thead>
                                <tr>
                                    <th>时间段</th>
                                    <th>应用类型</th>
                                    <th>优先级调整</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>工作日 9:00-18:00</td>
                                    <td>视频会议</td>
                                    <td>提高到最高优先级</td>
                                    <td><button class="btn btn-small">编辑</button></td>
                                </tr>
                                <tr>
                                    <td>工作日 18:00-23:00</td>
                                    <td>流媒体</td>
                                    <td>提高到高优先级</td>
                                    <td><button class="btn btn-small">编辑</button></td>
                                </tr>
                                <tr>
                                    <td>周末 全天</td>
                                    <td>在线游戏</td>
                                    <td>提高到高优先级</td>
                                    <td><button class="btn btn-small">编辑</button></td>
                                </tr>
                            </tbody>
                        </table>
                        <button class="btn btn-secondary">添加规则</button>
                    </div>
                </div>
            </div>
        </section>
        
        <section class="card">
            <h2>带宽管理</h2>
            <form class="settings-form">
                <div class="form-group">
                    <label for="download_bandwidth">下行总带宽 (kbps)</label>
                    <input type="number" id="download_bandwidth" value="100000">
                </div>
                
                <div class="form-group">
                    <label for="upload_bandwidth">上行总带宽 (kbps)</label>
                    <input type="number" id="upload_bandwidth" value="20000">
                </div>
                
                <h3>带宽分配策略</h3>
                
                <div class="form-group">
                    <label>低负载情况 (&lt;50%)</label>
                    <div class="slider-container">
                        <div class="slider-label">实时交互类:</div>
                        <input type="range" min="0" max="100" value="40" class="slider">
                        <div class="slider-value">40%</div>
                    </div>
                    <div class="slider-container">
                        <div class="slider-label">流媒体类:</div>
                        <input type="range" min="0" max="100" value="30" class="slider">
                        <div class="slider-value">30%</div>
                    </div>
                    <div class="slider-container">
                        <div class="slider-label">普通数据类:</div>
                        <input type="range" min="0" max="100" value="20" class="slider">
                        <div class="slider-value">20%</div>
                    </div>
                    <div class="slider-container">
                        <div class="slider-label">背景传输类:</div>
                        <input type="range" min="0" max="100" value="10" class="slider">
                        <div class="slider-value">10%</div>
                    </div>
                </div>
                
                <button type="button" class="btn btn-primary">保存设置</button>
            </form>
        </section>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2025 NetFlow 开发团队 | <a href="docs.html">文档</a> | <a href="#">GitHub</a></p>
        </div>
    </footer>
</body>
</html>
